<!--保证金充值-->
<template>
  <scroller class="all bg1" @rightBtn="rightBtn">
    <div class="wrapper" v-if="coin">
      
      <!--选择币-->
      <div class="row acenter" @click="selectClick">
        <text class="font48 text2 mr20">{{coin.name}}</text>
        <LImage class="img-arrow" :src="Config.img('v2_sanjiao_xia_bai.png')"></LImage>
      </div>
      
      <!--充值地址二维码-->
      <div class="qrcode bg2">

        <text class="font26 warning-t1">{{T('收款地址可能会变更，请先在此页面确认地址再充值。请勿转入非${1}资产，否则资产将不可找回。').replace("${1}", coin.name)}}</text>

        <div class="qrcode-size">
          <WeexQRCode class="qrcode-content" :code="coin.address"></WeexQRCode>
        </div>

        <text class="font26 text2">{{T('收款地址')}}</text>
        <div class="height10"></div>
        <text class="font26 text2 all">{{coin.address}}</text>
        <div class="copy main-b1"  @click="copyClick(coin.address)">
          <text class="font24 main-t1">{{T('复制')}}</text>
        </div>
      </div>

      <!--提示-->
      <text class="font24 text3 line-height50">{{T('1、当完成12个区块确认后，则视为已到账。')}}</text>
      <text class="font24 text3 line-height50">{{T('2、到账时间容易受网络堵塞的影响造成延迟，请您耐心等待。')}}</text>

      <div class="but-ok bt4" @click="okClick">
        <text class="font30 text2">{{T('我已充值')}}</text>
      </div>
    </div>
  </scroller>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.wrapper {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 60px;
}
.img-arrow{
  width:32px;
  height:32px;
}
.line-height50 {
  line-height: 50px;
}


/******************** 二维码 */
.qrcode{ 
  align-items: center;
  border-radius:24px;

  padding-top:40px;
  padding-left:40px;
  padding-right:40px;
  padding-bottom:80px;

  margin-left: -20px;
  margin-right: -20px;

  margin-top:30px;
  margin-bottom:30px;
}
.qrcode-size {
  justify-content: center;
  align-items: center;
  width:280px;
  height:280px;
  background-color:#FFFFFF;
  border-radius:12px;

  margin-top:80px;
  margin-bottom:40px;
}
.qrcode-content {
  width:260px;
  height:260px;
}
.copy {
  justify-content: center;
  align-items: center;

  min-width: 152px;
  height: 52px;
  border-radius: 6px;
  border-width: 2px;

  padding-left: 20px;
  padding-right: 20px;

  margin-top: 40px;
}

/******************** 已充值 */
.but-ok {
  justify-content: center;
  align-items: center;

  height: 80px;
  border-radius: 12px;

  margin-top:80px;
}


</style>

<script>

import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https"; ;
import jdebug from "@/_js/debug"; ;

const clipboard = weex.requireModule("clipboard");
const weexFunction = weex.requireModule("WeexFunction");
const globalEvent = weex.requireModule('globalEvent');

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('充值'));
weexFunction.setRightBtn(T('充值记录'));


export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,

      coinNames:undefined, //支持币数组
      coinMap:undefined, //支持币模型
      coin:undefined, //当前选中币
      type:1, //1按金额， 2按数量

      num:'', //输入数量
      totalNum:'0', //支付总数、得到总数
    };
  },

  created(){

    var param = weex.config;
    this.wallet = param.wallet;
    this.httpHome();
  },

  methods: {

    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      var nav = {'navColor':'#0c0c0c'};
      var param = {'wallet':this.wallet};
      jnavigator.open('', "wallet/EnsureBuyRecord", param, nav);
    },

    /******************************* HTTP*/
    //http充值首页
    httpHome(){

      jmodal.showLoad();
      var param = {'wallet':this.wallet}
      jhttps.post("tradeV2/getRechargePage",param,true,(data)=>{

        jmodal.hideLoad();
        if(data.status == 200){
          data = data.data;

          var coins = []; //支持币
          var coinNames = [];
          var coinMap = {};
          for (let index = 0; index < data.coinList.length; index++) {

            var coin = data.coinList[index];
            if ((this.wallet == 'incomeWallet' && coin.coinName=='USDT') ||
                (this.wallet == 'depositWallet' && coin.coinName=='VT')) {
              continue;
            }
            coin.name = coin.coinName + coin.chainName;
            coin.vtnRate = jmath.chu(1, coin.rate, 8, 2);

            coinNames.push(coin.name);
            coinMap[coin.name] = coin;
            coins.push(coin);
          }
          this.coinNames = coinNames;
          this.coinMap = coinMap;
          this.coin = coins[0];
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /******************************* 点击*/
    //选择币
    selectClick(){
      jmodal.actionSheet(this.coinNames, this.coin.name,(value)=>{
        this.coin = this.coinMap[value];
      });
    },

    //复制点击
    copyClick(address) {
      jmodal.toast(T('复制成功'),2);
      clipboard.setString(address);
    },

    //我已充值
    okClick() {
      jmodal.alert('      '+T('区块链上转账需要一定的时间来被确认，确认数达到要求后即可成功入账，请您耐心等待。'));
    },
  }
}
</script>
